<!--/**
* @author xuyh0817
* @email xuyh0817@foxmail.com
* @date 2022-02-16 15:58
* @version 2.0.0
* @doc todo
* @website todo
* @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
*/
-->
<template>
  <a-time-picker
    style="width: 100%;"
    :open.sync="show"
    :value="currentValue"
    :locale="locale"
    v-bind="attrs"
    @change="changeHandler"
    @openChange="show = true"
  >
    <div v-if="showCurrent && !(slots.hasOwnProperty('addon'))" slot="addon" class="x-render-time-picker-addon">
      <a-button size="small" type="primary" @click="currentTimeHandler">
        此刻
      </a-button>
    </div>
<!--    <extend-slot v-for="(render, key) of slots" v-slot:[key] :key="key" :data="slotData" :render="render"/>-->
  </a-time-picker>
</template>

<script>

import moment from 'moment'
import ComponentMixin from '../../XRenderMixins/XRenderComponentMixin'
import DateMixin from '../../XRenderMixins/XRenderDateMixin'
import {COMPONENT_TYPE, CUSTOM_EVENT_TYPE} from '../../constants'

export default {
  name: COMPONENT_TYPE.TIME_PICKER,
  mixins: [ComponentMixin, DateMixin],
  props: {
    value: {
      type: String
    }
  },
  data() {
    return {
      show: false
    }
  },
  computed: {
    showCurrent: {
      get() {
        const {attrs} = this
        const {showCurrent} = attrs
        return !!showCurrent
      }
    },
    currentValue: {
      get() {
        const {attrs, value} = this
        const {format, isNow} = attrs
        const currentFormat = format || 'HH:mm:ss'
        if (value) {
          return moment(value, currentFormat)
        }
        if (!isNow) {
          return ''
        }
        const dateFormat = this.dateFormat(currentFormat)
        return moment(dateFormat, currentFormat)
      }
    }
  },
  methods: {
    changeHandler(moment, date) {
      const {formItem, attrs} = this
      this.$emit(CUSTOM_EVENT_TYPE.CHANGE, {
        type: COMPONENT_TYPE.TIME_PICKER,
        prop: formItem ? formItem.prop : '',
        value: date,
        attrs,
        formItem,
        moment
      })
    },
    currentTimeHandler() {
      this.changeHandler(undefined, this.dateFormat())
      this.show = false
    }
  }
}
</script>

<style scoped lang="css">
.x-render-time-picker-addon {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
}
</style>
